import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:puppy_store/pages/cart/cart_page.dart';
import 'package:puppy_store/pages/goods_detail/goods_detail_options.dart';
import 'package:puppy_store/pages/goods_detail/goods_specs_widget.dart';
import 'package:puppy_store/service/cart_api.dart';

// 跨组件通信 步骤1: 定义ValueNotifier指定要监听的商品总数
ValueNotifier<int>? totalCountNotifier; // 指定初始值为0

class GoodsDetailBottomBar extends StatefulWidget {
  @override
  _GoodsDetailBottomBarState createState() => _GoodsDetailBottomBarState();
}

class _GoodsDetailBottomBarState extends State<GoodsDetailBottomBar> {
  /// 底部操作栏的高度
  double _bottomBarHeight = 0.0;

  /// 是否收藏
  bool _isCollection = false;

  /// 购物车总数量
  int _totalCount = 0;

  /// 获取购物车总数量
  void _loadCartTotalCount() async {
    try {
      // 调用购物车接口
      _totalCount = await CartApi.getCartTotalCount();
      // 跨组件通信 步骤3: 通知ValueNotifier更新值, 局部刷新界面
      totalCountNotifier?.value = _totalCount;

      debugPrint('购物车总数量: $_totalCount');
    } catch (e) {
      debugPrint('获取购物车总数量失败: $e');
    }
  }

  @override
  void initState() {
    totalCountNotifier = ValueNotifier<int>(0);
    _loadCartTotalCount();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // 底部操作栏的高度：自身高度 + 不规则屏幕底部间距
    _bottomBarHeight = 60.0 + MediaQuery.of(context).padding.bottom;
    return Container(
      height: _bottomBarHeight,
      color: Colors.white,
      child: Column(
        children: [
          Container(height: 1.0, color: Color(0xFFEDEDED)),
          Container(
            height: 59.0,
            padding: EdgeInsets.only(left: 20.0, right: 10.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  children: [
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          _isCollection = !_isCollection;
                        });
                        if (_isCollection) {
                          EasyLoading.showToast('已收藏');
                        } else {
                          EasyLoading.showToast('已取消');
                        }
                      },
                      child: Container(
                        width: 30.0,
                        height: 30.0,
                        child:
                            _isCollection
                                ? Image.asset(
                                  'assets/star_collection.png',
                                  gaplessPlayback: true,
                                )
                                : Image.asset(
                                  'assets/star_uncollection.png',
                                  gaplessPlayback: true,
                                ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 20.0),
                      child: GestureDetector(
                        onTap: () {
                          Navigator.push(
                            context,
                            CupertinoPageRoute(
                              builder: (context) {
                                return CartPage(isShowBack: true);
                              },
                            ),
                          );
                        },
                        // 跨组件通信 步骤2: 使用ValueListenableBuilder与ValueNotifier绑定, 值变化内部的builder就会刷新
                        child: ValueListenableBuilder(
                          valueListenable: totalCountNotifier!,
                          // value 就是实时刷新的最新值
                          builder: (BuildContext context, int value, child) {
                            return SizedBox(
                              width: 35.0,
                              height: 30.0,
                              child: Stack(
                                children: [
                                  Image.asset('assets/shopping_cart.png'),
                                  value > 0
                                      ? Positioned(
                                        top: 0.0,
                                        right: 0.0,
                                        child: Container(
                                          alignment: Alignment.center,
                                          padding: EdgeInsets.symmetric(
                                            vertical: 1.0,
                                            horizontal: 2.0,
                                          ),
                                          decoration: BoxDecoration(
                                            color: Colors.red,
                                            borderRadius: BorderRadius.circular(
                                              4.0,
                                            ),
                                          ),
                                          // 最小宽度是16.0
                                          constraints: BoxConstraints(
                                            minWidth: 16.0,
                                          ),
                                          child: Text(
                                            value.toString().length > 3
                                                ? '99+'
                                                : value.toString(),
                                            style: TextStyle(
                                              fontSize: 11.0,
                                              color: Colors.white,
                                              height: 1.0,
                                            ),
                                          ),
                                        ),
                                      )
                                      : Container(),
                                ],
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                ),
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.only(left: 30.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        GestureDetector(
                          onTap: () {
                            // 使用详情选项组件的key,去调用商品规格弹窗的公共方法
                            goodsDetailOptionsKey.currentState
                                ?.showGoodsSpecsCupertinoModalPopup(
                                  SpecsActionType.addCart,
                                );
                          },
                          child: Container(
                            width: 100.0,
                            height: 40.0,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(2.0),
                              gradient: LinearGradient(
                                colors: [Color(0xffFFA868), Color(0xffFF9240)],
                              ),
                            ),
                            child: Text(
                              '加入购物车',
                              style: TextStyle(
                                fontSize: 13.0,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            // 使用详情选项组件的key,去调用商品规格弹窗的公共方法
                            goodsDetailOptionsKey.currentState
                                ?.showGoodsSpecsCupertinoModalPopup(
                                  SpecsActionType.buyNow,
                                );
                          },
                          child: Container(
                            width: 100.0,
                            height: 40.0,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(2.0),
                              gradient: LinearGradient(
                                colors: [Color(0xff3CCEAF), Color(0xff27BA9B)],
                              ),
                            ),
                            child: Text(
                              '立即购买',
                              style: TextStyle(
                                fontSize: 13.0,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
